<template>
	<view class="login">
		<view class="header">
			<image class="headImg" src="/static/logo.png"></image>
			<view class="title">对味记账</view>
			<view class="desc">家常记账，勤俭持家</view>
		</view>

		<view class="content">
			<u-form-item label="昵称"><u-input placeholder="请输入昵称" v-model="userId" /></u-form-item>
			<u-form-item label="密码"><u-input placeholder="请输入密码" type="password" v-model="password" /></u-form-item>
		</view>

		<view class="botBtn"><u-button shape="circle" type="primary" @click="goLogin">登录</u-button></view>
	</view>
</template>

<script>
import { user_login } from '@/api/api.js';

export default {
	data() {
		return {
			userId: '',
			password: ''
		};
	},
	methods: {
		goLogin() {
			if (this.userId === '') {
				this.$utils.showToast('请输入用户名');
				return;
			}

			if (this.password === '') {
				this.$utils.showToast('请输入密码');
				return;
			}

			this.getUserInfo();
		},
		getUserInfo() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			user_login({
				userId: this.userId,
				password: this.password
			}).then(res => {
				uni.hideLoading();
				let userInfo = {
					userId: this.userId,
					token: res.token
				};
				uni.setStorageSync('userInfo', userInfo);
				uni.reLaunch({
					url: '/pages/app/bookkeeping/bookkeeping'
				});
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.login {
	padding: 40rpx;
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;

		.headImg {
			width: 400rpx;
			height: 400rpx;
		}

		.title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.desc {
			font-size: 26rpx;
			margin-top: 30rpx;
		}
	}

	.content {
		margin-top: 30rpx;
	}

	.botBtn {
		margin: auto;
		margin-top: 40rpx;
		width: 400rpx;
	}
}
</style>
